<#assign fields=pojo.getFilterdPojoFields()>
<#assign declarationName = pojo.importType(pojo.getDeclarationName())>
<#assign declarationNameFirstLetterLower = pojo.importType(pojo.getDeclarationNameFirstLetterLower())>
<#assign mainDeclarationName = mainpojo.importType(mainpojo.getDeclarationName())>
<#assign mainDeclarationNameFirstLetterLower = mainpojo.importType(mainpojo.getDeclarationNameFirstLetterLower())>
<#assign realPackageAndClassPath = "${mainpojo.getRealPackageAndClassPath()}">
<#assign masterid = mainpojo.getDeclarationNameFirstLetterLower()+"Id">
import React, { PropTypes } from 'react'
import { routerRedux } from 'dva/router'
import { connect } from 'dva'
import ${mainDeclarationName}Form from '../components/${mainDeclarationName}Form'
import ${declarationName}ToolBar from '../components/${declarationName}ToolBar'
import ${declarationName}List from '../components/${declarationName}List'
import ${declarationName}Modal from '../components/${declarationName}Modal'

import {Modal, notification } from 'antd'
import {Link} from 'dva/router'
const confirm = Modal.confirm

import {DropOption} from '../../components'

function ${mainDeclarationName}${declarationName} ({ location, dispatch, ${mainDeclarationNameFirstLetterLower}${declarationName}, loading }) {
  const { ${mainDeclarationNameFirstLetterLower}, list, pagination, currentItem, modalVisible, modalType, expand, selectedRowKeys, selectedRows } = ${mainDeclarationNameFirstLetterLower}${declarationName}
  const { pageSize } = pagination

  const handleMenuClick = (record, e) => {
    if (e.key == 'edit') {
      on${declarationName}RowEditItem(record)
    } else if (e.key == 'remove') {
      confirm({
        title: 'Are you sure delete this record?',
        onOk () {
          on${declarationName}RowDeleteItem(record.id)
        },
      })
    }
  }

  const on${declarationName}RowEditItem = function (item) {
    dispatch({
      type: '${mainDeclarationNameFirstLetterLower}${declarationName}/showModal',
      payload: {
        modalType: 'update',
        currentItem: item
      }
    })
  }

 const on${declarationName}RowDeleteItem = function (ids) {
    confirm({
      title: 'Are you sure delete this record?',
      onOk () {
        dispatch({
          type: '${mainDeclarationNameFirstLetterLower}${declarationName}/delete',
          payload: ids
        })
      }
    })
  }

  const ${declarationNameFirstLetterLower}FilterProps = {
    expand,
    filter: {
      ...location.query,
    },
    onFilterChange (value) {
      dispatch(routerRedux.push({
        pathname: location.pathname,
        query: {
          ...value,
          pageIndex: 1,
          pageSize,
        },
      }))
    },
    onSearch (fieldsValue) {
      fieldsValue.keyword.length ? dispatch(routerRedux.push({
        pathname: '/${mainDeclarationNameFirstLetterLower}${declarationName}',
        query: {
          field: fieldsValue.field,
          keyword: fieldsValue.keyword,
        },
      })) : dispatch(routerRedux.push({
        pathname: '/${mainDeclarationNameFirstLetterLower}${declarationName}',
      }))
    },
    switchExpand () {
      dispatch({type: '${mainDeclarationNameFirstLetterLower}${declarationName}/switchExpand'})
    },
  }

  const ${declarationNameFirstLetterLower}ToolBarProps = {
    on${declarationName}AddItem () {
      dispatch({
        type: '${mainDeclarationNameFirstLetterLower}${declarationName}/showModal',
        payload: {
          modalType: 'create',
        },
      })
    },
    on${declarationName}EditItem () {
      if(1!==selectedRows.length){
        const modal = Modal.error({
          title: '错误的选择数量',
          content: '请选择且只选择一条并编辑',
        });
        setTimeout(() => modal.destroy(), 7000);
      }else{
        let item=selectedRows[0]
        on${declarationName}RowEditItem(item)
      }
    },
    on${declarationName}DeleteItem () {
      if(selectedRowKeys.length<=0){
        const modal = Modal.error({
          title: '错误的选择数量',
          content: '请选择需要删除的数据',
        });
        setTimeout(() => modal.destroy(), 7000);
      }else{
        confirm({
          title: 'Are you sure delete this record?',
          onOk () {
            on${declarationName}RowDeleteItem(selectedRowKeys)
          },
        })
      }
    },
  }

  const ${declarationNameFirstLetterLower}ListProps = {
    on${declarationName}RowEditItem:on${declarationName}RowEditItem,
    on${declarationName}RowDeleteItem:on${declarationName}RowDeleteItem,
    dataSource: list,
    loading: loading.effects['${mainDeclarationNameFirstLetterLower}${declarationName}/query'],
    pagination,
    location,
    onChange (page) {
      const { query, pathname } = location
      dispatch(routerRedux.push({
        pathname: pathname,
        query: {
          ...query,
          pageIndex: page.current,
          pageSize: page.pageSize
        }
      }))
    },
    rowSelection: {
      selectedRowKeys,
      onChange: (keys,rows) => {
        dispatch({
          type: '${mainDeclarationNameFirstLetterLower}${declarationName}/updateState',
          payload: {
            selectedRowKeys: keys,
            selectedRows: rows,
          },
        })
      },
    },
    columns:[
<#assign fields=pojo.getFilterdPojoFields()>
<#foreach field in fields>
    <#if field.getIsSampleField()>
      {
        title: '<#if field.getComment()?exists>${field.getComment()}<#else>${field.getName()}</#if>',
        dataIndex: '${field.getName()}',
        key: '${field.getName()}',
      },
    </#if>
</#foreach>
    {
      title: 'Operation',
      key: 'operation',
      width: 100,
      render: (text, record) => {
        return <DropOption onMenuClick={e => handleMenuClick(record, e)}
                           menuOptions={[{key: 'edit', name: '编辑'}, {key: 'remove', name: '删除'}]}/>
      },
    },
  ]
  }

  const ${declarationNameFirstLetterLower}ModalProps = {
    item: modalType == 'create' ? {} : currentItem,
    visible: modalVisible,
    maskClosable: false,
    key:currentItem.id,
    confirmLoading: loading.effects['${mainDeclarationNameFirstLetterLower}${declarationName}/update'],
    title: `${r"${"}modalType === 'create' ? 'Create ${declarationName}' : 'Update ${declarationName}'}`,
    wrapClassName: 'vertical-center-modal',
    onOk (data) {
      dispatch({
        type: `${mainDeclarationNameFirstLetterLower}${declarationName}/${r"${modalType}"}`,
        payload: data,
      })
    },
    onCancel () {
      dispatch({
        type: '${mainDeclarationNameFirstLetterLower}${declarationName}/hideModal'
      })
    },
  }

  const ${mainDeclarationNameFirstLetterLower}FormProps = {
    item: ${mainDeclarationNameFirstLetterLower},
  }

  return (
    <div className='content-inner'>
        <${mainDeclarationName}Form {...${mainDeclarationNameFirstLetterLower}FormProps} />
        <${declarationName}ToolBar {...${declarationNameFirstLetterLower}ToolBarProps} />
        <${declarationName}List {...${declarationNameFirstLetterLower}ListProps} />
        <${declarationName}Modal {...${declarationNameFirstLetterLower}ModalProps} />
    </div>
  )
}

${mainDeclarationName}${declarationName}.propTypes = {
  ${mainDeclarationNameFirstLetterLower}${declarationName}: PropTypes.object,
  location: PropTypes.object,
  dispatch: PropTypes.func,
  loading: PropTypes.object,
}

export default connect(({ ${mainDeclarationNameFirstLetterLower}${declarationName}, loading }) => ({ ${mainDeclarationNameFirstLetterLower}${declarationName}, loading: loading }))(${mainDeclarationName}${declarationName})